import { defineComponent, watch, shallowReactive } from 'vue'

// 声明类型
const PropsType = {
	tips: {
		type: Number,
		default: 50,
		require: true,
	},
	title: {
		type: String,
		require: true,
	},
	range: {
		type: Number,
		default: 5,
		require: true,
	},
	colorObj: {
		type: Object,
		default: () => ({
			textStyle: '#3fc0fb',
			series: {
				color: ['#00bcd44a', 'transparent'],
				dataColor: {
					normal: '#03a9f4',
					shadowColor: '#97e2f5',
				},
			},
		}),
	},
} as const

// 定义主体
export default defineComponent({
	props: PropsType,
	setup(props) {
		// 配置项
		let options = shallowReactive({ title: null, series: null })

		watch(
			() => props.tips,
			(val: any) => {
				options = {
					title: {
						text: props.title + '\n\n' + 'mg·kg^(-1)' + '\n\n' + val * 1 + '%',
						x: 'center',
						y: 'center',
						textStyle: {
							color: props.colorObj.textStyle,
							fontSize: 16,
						},
					},
					series: [
						{
							type: 'pie',
							radius: ['65%', '80%'],
							center: ['50%', '50%'],
							hoverAnimation: true,
							color: props.colorObj.series.color,
							label: {
								normal: {
									show: false,
								},
							},
							data: [
								{
									value: val,
									itemStyle: {
										normal: {
											color: props.colorObj.series.dataColor.normal,
											shadowBlur: 10,
											shadowColor: props.colorObj.series.dataColor.shadowColor,
										},
									},
								},
								{
									value: props.range - val,
								},
							],
						},
					],
				}
			},
			{
				immediate: true,
				deep: true,
			}
		)

		return () => {
			const height = '300px'
			const width = '300px'

			return (
				<div>
					<echart options={options} height={height} width={width} />
				</div>
			)
		}
	},
})
